<template>
  <div class="conainer">
    <el-row :gutter="20" :show-overflow-tooltip="true" style="width: 100%">
      <el-col :span="4" :xs="24" >
        <div class="head-container" >
          <el-input
            placeholder="请输入领域名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container" style="min-width: 200px">
          <el-tree
            :data="domainOptions"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :default-expand-all="true"
            check-on-click-node
            :auto-expand-parent="true"
            :expand-on-click-node="false"
            highlight-current:true
            node-key="id"
            ref="myTree"
            :current-node-key="queryParams.domain"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="10">
        <div class="search">
          <div class="input-search">
            <el-input placeholder="请输入内容" v-model="input">
              <template slot="append"
                ><el-button type="primary" icon="el-icon-search"
                  >搜索</el-button
                ></template
              >
            </el-input>
          </div>
          <div class="tabs-search">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                v-for="item in tabOptions"
                :key="item.value"
                :label="item.label"
                :name="item.value"
              >
                <Content :datas="moduleList" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Content from "./content.vue";
import { treeselect } from "@/api/system/moduletypedomain";
import { listModule, getModule } from "@/api/system/module";

export default {
  name: "Classification",
  components: { Content },
  dicts: ["sys_module_status", "sys_supplier_module_type"],
  data() {
    return {
      input: "",
      activeName: "1",
      domainOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      tabOptions: [],
      moduleList: [],
      queryParams: {
        moduleTag: "1",
        moduleTypeId: undefined,
        moduleName: undefined,
      },
    };
  },
  mounted() {
    this.tabOptions = this.dict.type.sys_supplier_module_type;
    this.getTreeselect();
    this.getList();
  },
  methods: {
    handleClick(tab) {
      console.log(tab, tab.$options.propsData.name);
      this.queryParams.moduleTag = tab.$options.propsData.name;
      this.handleQuery();
    },
    /** 查询模块列表 */
    getList() {
      listModule(this.queryParams).then((response) => {
        this.moduleList = response.rows;
        // this.total = response.total;
        console.log(response, this.moduleList);
      });
    },
    getTreeselect() {
      treeselect().then((response) => {
        this.domainOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.moduleTypeId = data.id;
      this.handleQuery();
    },

    handleQuery() {
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.conainer {
  width: 100%;
  margin: 20px;
  .search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .input-search {
      margin-top: 15px;
      width: 60%;
    }
    .tabs-search {
      margin-top: 15px;
      width: 90%;
    }
  }
}
</style>
